import React,{Suspense} from 'react'
import {
    BrowserRouter , 
    Route , 
    Routes ,
    Navigate
} from 'react-router-dom'
import routes from './route.config'
type Props = {}

const Renderpages = (props: Props) => {
    const render = (routes:any) => {
        return routes.map((item:any,index:number) => {
            return <Route
                key={index}
                path={item.path}
                element={item.component?<item.component/>:<Navigate to={item.to as string}/>}
            >
                {
                    item.children && render(item.children)
                }
            </Route>
        })
    }
  return (
    <Suspense fallback={<>路由加载中...</>}>
        <BrowserRouter>
            <Routes>
                {
                    render(routes)
                }
            </Routes>
        </BrowserRouter>
    </Suspense>
  )
}

export default Renderpages